<template>
  <div class="status-advertise">
    <div class="top">
      <div
        class="item"
        @click="
          onJump('https://tb.ele.me/wow/alsc/mod/ebdaad749490e267b4455250')
        "
      >
        <img :src="advertise2" />
      </div>
      <div
        class="item"
        @click="
          onJump('https://tb.ele.me/wow/alsc/mod/4ef697213f7af5c38c47db5c')
        "
      >
        <img :src="advertise3" />
      </div>
    </div>
    <div
      class="bottom"
      @click="
        onJump(
          'https://h5.ele.me/co-branded-card/index.html?channel=card-waimaigui004'
        )
      "
    >
      <img :src="advertise1" />
    </div>
  </div>
</template>
<script>
export default {
  name: "status-advertise",
  props: {
    title: String,
  },
  data() {
    return {
      advertise1: require("@/assets/img/1330-300.png"),
      advertise2: require("@/assets/img/660-600-1.jpg"),
      advertise3: require("@/assets/img/660-600-2.jpg"),
    };
  },
  methods: {
    onJump(url) {
      window.open(url, "_blank");
    },
  },
};
</script>

<style lang="less" scoped>
.status-advertise {
  display: flex;
  flex-direction: column;

  img {
    width: 100%;
    border-radius: 0.4rem;
  }

  .bottom {
    width: 100%;
    background-color: #fff;
    border-radius: 0.2rem;
    margin-bottom: 0.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .top {
    display: flex;
    margin-bottom: 0.2rem;

    .item {
      border-radius: 0.2rem;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;

      &:first-child {
        margin-right: 0.2rem;
      }
    }
  }
}
</style>
